<template>
	<view class="workbench_box">
		<template v-if="userType==9">
			<u-sticky bgColor="#fff">
				<u-tabs :list="tabsList" lineColor="#FE5A1C" itemStyle="width: 50%;padding:24rpx 0;"
					inactiveStyle="color: #999999" lineWidth="66rpx" lineHeight="10rpx"
					@change="handleChangeTab"></u-tabs>
			</u-sticky>
			<view class="plr_12">
				<view class="mt_12" v-for="item,index in dataList" :key="index">
					<OrderItem :data="item" @check="handleCheck" />
				</view>
				<view class="pt_16">
					<u-loadmore :status="loadingStatus" />
				</view>
			</view>
		</template>
		<view class="list_wrap" v-else>
				<view class="all_box bc_fff br_4 mt_12">
					<view class="order_header box height_40" @click="handleOrder()">
						<view class="header_left">
							<image src="@/static/images/order_icon.png" class="width_20 height_20" mode=""></image>
							<view class="ml_7 fz_16 fb">
								全部订单
							</view>
						</view>
						<view class="header_right fz_16 fb lh_14">
							{{totalOrders||0}}
							<u-icon class="ml_8" name="arrow-right" color="#999999"></u-icon>
						</view>
					</view>
					<view class="list_box box">
						<view class="single_list box width_104 height_59 br_4 mb_8 ml_8" v-for="item,index in topData"
							:key="index" @click="handleOrder(item)">
							<view class="single_header fz_12">
								{{item.name}}
								<u-icon class="ml_8" name="arrow-right" color="#999999"></u-icon>
							</view>
							<view class="number_box fz_16 fb mt_4">
								<view :class="{'number_text':ture,'fc_primary':item.dot}">
									<view class="">
										{{item.value||0}}
									</view>
									<view class="radius width_4 height_4 br_4" v-if="item.dot&&item.value>0">
									</view>
								</view>

							</view>
						</view>
						<view class="pt-6 audit_btn" v-if="userType==6||userType==7" @click="bindAudit">
							<button class="custom_btn bc_primary br_8 fc_fff lh_40 w100">待审核（{{userType==6?numData.toChargeBeAudit:numData.toChiefBeAudit}}）</button>
						</view>
					</view>
				</view>
			
			<template v-if="userType!=8">
				<view class="workbenct_data_picker">
					<DateType :pickerValue="pickerValue" @updatePickerValue="updatePickerValue" />
				</view>
				<view class="data_box box br_8 mt_12 flow_h">
					<view class="data_header w100 height_40 back1">
						<view class="fz_16 fb fc_333 pl_8 fx aic">
							<image class="width_18 height_18 mr_4" src="/static/images/workbetch_icon.png" mode="">
							</image>
							订单金额统计（元）
						</view>
					</view>
					<view class="data_content bc_fff">
						<view class="data_inner w100 height_60">
							<view class="single_data">
								<view class="fz_12 fc_999">
									已收金额
								</view>
								<view class="fz_20 fc_333 fb mt_6">
									{{priceData.amountReceived||0}}
									<text class="fc_999 fz_12">({{priceData.downPayment||0}}定金)</text>
								</view>
							</view>
							<view class="single_data center_box">
								<view class="fz_12 fc_999">
									未收金额
								</view>
								<view class="fz_20 fc_333 fb mt_6">
									{{priceData.uncollectedAmount||0}}
								</view>
							</view>
							<view class="single_data">
								<view class="fz_12 fc_999">
									总销量
								</view>
								<view class="fz_20 fc_333 fb mt_6">
									{{priceData.all||0}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="data_box box br_8 mt_12 flow_h">
					<view class="data_header w100 height_40 back1">
						<view class="fz_16 fb fc_333 pl_8 fx aic">
							<image class="width_18 height_18 mr_4" src="/static/images/workbetch_icon.png" mode="">
							</image>
							订单量统计（单）
						</view>
					</view>
					<view class="data_content bc_fff">
						<view class="data_inner w100 height_60">
							<view class="single_data">
								<view class="fz_12 fc_999">
									全款订单
								</view>
								<view class="fz_20 fc_333 fb mt_6">
									{{priceData.fullOrder||0}}
								</view>
							</view>
							<view class="single_data center_box">
								<view class="fz_12 fc_999">
									定金订单
								</view>
								<view class="fz_20 fc_333 fb mt_6">
									{{priceData.depositOrder||0}}
								</view>
							</view>
							<view class="single_data">
								<view class="fz_12 fc_999">
									订单数
								</view>
								<view class="fz_20 fc_333 fb mt_6">
									{{priceData.totalOrders||0}}
								</view>
							</view>
						</view>
					</view>
<!-- 					<view class="pt-6" v-if="userType==6||userType==7">
						<button class="custom_btn bc_primary br_8 fc_fff lh_40 w100">待审核（{{userType==6?numData.toChargeBeAudit:numData.toChiefBeAudit}}）</button>
					</view> -->
				</view>
				<view class="data_box box br_8 mt_12 flow_h">
					<view class="data_header w100 height_40 back1">
						<view class="fz_16 fb fc_333 pl_8 fx aic">
							<image class="width_18 height_18 mr_4" src="/static/images/workbetch_icon.png" mode="">
							</image>
							业绩统计（元）
						</view>
					</view>
					<view class="data_content bc_fff">
						<view class="data_inner w100 height_60">
							<view class="single_data">
								<view class="fz_12 fc_999">
									尾款
								</view>
								<view class="fz_20 fc_333 fb mt_6">
									{{performanceData.recoveryOfBalance||0}}
								</view>
							</view>
							<view class="single_data center_box">
								<view class="fz_12 fc_999">
									退货
								</view>
								<view class="fz_20 fc_333 fb mt_6">
									{{performanceData.goodsRejected||0}}
								</view>
							</view>
							<view class="single_data">
								<view class="fz_12 fc_999">
									业绩
								</view>
								<view class="fz_20 fc_333 fb mt_6">
									{{performanceData.all||0}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="data_box box br_8 mt_12 flow_h" v-if="userType<=7">
					<view class="data_header w100 height_40 back1">
						<view class="fz_16 fb fc_333 pl_8 fx aic">
							<image class="width_18 height_18 mr_4" src="/static/images/workbetch_icon.png" mode="">
							</image>
							业绩明细
						</view>
					</view>
					<view class="data_content bc_fff" v-if="performanceData.userPerformanceDtoList">
						<template v-for="item,index in performanceData.userPerformanceDtoList">
							<view class="list width_351 height_110 box br_8 bc_fff mt_12 ml_12 mr_12" v-if="index<3"
								:key="index">
								<view class="list_top">
									<view class="top_left">
										<view class="photo width_36 height_36 mr_12">
											<image :src="`${ossUrl}/range_${index+1}.png`" class="width_36 height_36"
												mode="">
											</image>
										</view>
										<image class="width_40 height_40 br_40 mr_12" :src="item.image?getStaticUrl(item.image):'../../../static/images/avatar_empty.png'">

										</image>	
										<!-- <image class="width_40 height_40 br_40 mr_12" :src="getStaticUrl(item.image)">

										</image> -->

										<view class="fz_16 fc_000 fb">
											{{item.userName||''}}
										</view>
									</view>
									<view class="">
										<u-icon name="arrow-right" color="#333333"></u-icon>
									</view>
								</view>
								<view class="list_bottom fz_16 fb">
									<view class="fc_333">
										业绩：¥{{item.all||0}}
									</view>
									<view class="fc_999">
										退货：¥{{item.goodsRejected||0}}
									</view>
								</view>
							</view>
							<view class="list width_351 height_110 box br_8 bc_fff mt_12 ml_12 mr_12" v-else
								:key="index">
								<view class="list_top">
									<view class="top_left">
										<view class="number_box width_36 height_36 mr_12">
											<view class="width_28 height_23 br_14 fc fz_14 fb">
												{{index+1}}
											</view>
										</view>
										<image class="width_40 height_40 br_40 mr_12" :src="getStaticUrl(item.image)">

										</image>
										<view class="fz_16 fc_000 fb">
											{{item.userName||''}}
										</view>
									</view>
									<view class="">
										<u-icon name="arrow-right" color="#333333"></u-icon>
									</view>
								</view>
								<view class="list_bottom fz_16 fb">
									<view class="fc_333">
										业绩：¥{{item.all||0}}
									</view>
									<view class="fc_999">
										退货：¥{{item.goodsRejected||0}}
									</view>
								</view>
							</view>
						</template>
					</view>
				</view>
			</template>
		</view>
		<PopupPreview key="logistics" title="物流单" :list="logisticsImage" :visible.sync="popupPreviewLogisticsShow" />
	</view>
</template>

<script>
	import DateType from "../../index/radar/components/DateType.vue"
	import OrderItem from '../components/OrderItem.vue'
	import dataMixin from '@/mixins/data.js'
	import PopupPreview from '@/components/PopupPreview.vue'
	import api from '@/service/config/api'
	import {
		getStaticUrl
	} from '@/utils/index.js'
	import {
		mapState
	} from 'vuex'
	const topDataTmplate = {
		toBeConfirm: {
			name: '待确认',
			value: 0,
			orderType: 2,
			dot: true
		},
		toBePaid: {
			name: '待支付',
			value: 0,
			orderType: 5,
			dot: true
		},
		paymentToBeConfirmed: {
			name: '待确认收款',
			value: 0,
			orderType: 6,
			dot: false
		},
		inStock: {
			name: '备货中',
			value: 0,
			orderType: 7,
			dot: false
		},
		balanceToBePaid: {
			name: '待支付尾款',
			value: 0,
			orderType: 8,
			dot: true
		},
		balanceToBeConfirmed: {
			name: '待确认尾款',
			value: 0,
			orderType: 9,
			dot: false
		},
		goodsToBeReceived: {
			name: '待收货',
			value: 0,
			orderType: 10,
			dot: false
		},
		toBeInstalled: {
			name: '待安装',
			value: 0,
			orderType: 11,
			dot: false
		},
		completed: {
			name: '已完成',
			value: 0,
			orderType: 12,
			dot: false
		},
		canceled: {
			name: '已取消',
			value: 0,
			orderType: 13,
			dot: false
		},
		afterSales: {
			name: '售后',
			value: 0,
			orderType: 'aftersale',
			dot: false
		},
		toBeConfirmedByTheDealer: {
			name: '待经销商确认',
			value: 0,
			orderType: 1,
			dot: false
		}
	}
	export default {
		mixins: [dataMixin],
		components: {
			OrderItem,
			DateType,
			PopupPreview,
		},
		data() {
			return {
				ossUrl: this.$base.ossUrl,
				performanceData: {}, // 业绩统计
				numData: {}, // 数量统计
				priceData: {}, // 数据统计
				topData: topDataTmplate,
				userInfo: this.$storage.getItem('basicUnserInfo') || {},
				tabsList: [{
					name: '待上传',
					type: 1,
				}, {
					name: '已上传',
					type: 2,
				}],
				listUrl: '/order/api/tMyStaging/orderPageList',
				params: {
					logisticsUploadStatus: 1,
				},
				dataList: [],
				pickerValue: {
					type: 1,
					label: "今日",
					beginTime: "",
					endTime: ""
				},
				totalOrders: 0,
				popupPreviewLogisticsShow: false,
				logisticsImage: [],
			}
		},
		onShow() {
			if (this.userType == 9) {
				this.getData(true)
			} else {
				this.loadData = false
				this.getDataInfo()
			}
		},
		computed: {
			...mapState(['userType']),
			getStaticUrl() {
				return (src) => getStaticUrl(src)
			},
			_pickerValue() {
				return {
					...this.pickerValue,
					beginTime: this.pickerValue.startTime
				}
			}
		},
		watch: {
			pickerValue: {
				handler(newVal) {
					if (newVal) {
						if ((newVal.type == 5 && newVal.startTime && newVal.endTime) || newVal.type != 5)
							this.getDataInfo()
					}
				},
				deep: true
			}
		},
		methods: {
			updatePickerValue(value) {
				this.pickerValue = value
			},
			getDataInfo() {
				this.$utils.loading()
				let p = Promise.all([this.getPerformanceData(), this.getNumData(), this.getPriceData()])
				p.finally(() => {
					uni.hideLoading()
				})
			},
			// 业绩统计
			getPerformanceData() {
				return new Promise(resolve => {
					api.get('/order/api/tMyStaging/performanceTotal', this._pickerValue, {
						noHideLoading: true
					}).then(res => {
						this.performanceData = res.data
					}).finally(() => {
						resolve()
					})
				})
			},
			// 数量统计
			getNumData() {
				return new Promise(resolve => {
					api.get('/order/api/tMyStaging/orderNumTotal', this._pickerValue, {
						noHideLoading: true
					}).then(res => {
						const topDataTmplate1 = JSON.parse(JSON.stringify(topDataTmplate))
						Object.keys(topDataTmplate1).map(key => {
							if (res.data[key]) {
								topDataTmplate1[key].value = res.data[key]
							}
						})
						this.topData = topDataTmplate1
						this.totalOrders = res.data.all
						this.numData = res.data
					}).finally(() => {
						resolve()
					})
				})
			},
			// 数据统计
			getPriceData() {
				return new Promise(resolve => {
					api.get('/order/api/tMyStaging/orderMoneyTotal', this._pickerValue, {
						noHideLoading: true
					}).then(res => {
						this.priceData = res.data
					}).finally(() => {
						resolve()
					})
				})
			},
			bindAudit(){
				let status =this.userType==6?3:4
				uni.navigateTo({
					url: '/pages/workbench/pages/order_list?type=work&type=' + status
				})
			},
			
			handleOrder(item) {
				console.log("页面跳转")
				console.log(item)
				if (!item) {
					uni.navigateTo({
						url: '/pages/workbench/pages/order_list'
					})
				} else {
					if (item.orderType === 'aftersale') {
						uni.navigateTo({
							url: '/pages/person/pages/aftersale_list?origin=2'
						})
					} else {
						uni.navigateTo({
							url: '/pages/workbench/pages/order_list?type=work&type=' + item.orderType
						})
					}
				}
			},
			handleChangeTab({
				type
			}) {
				this.$set(this.params, 'logisticsUploadStatus', type)
				this.getData(true)
			},
			handleCheck(item) {
				let data = item ? item : this.dataInfo.orderBrandInfoList[0].productInfoList[0]
				if (data.logisticsImageUrl) {
					this.logisticsImage = data.logisticsImageUrl.split(',')
					this.popupPreviewLogisticsShow = true
				} else {
					this.$utils.showToast('暂无物流单')
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	// .workbench_box{
	// 	border: 1px solid red;
	// }

	.list_wrap {
		padding-bottom: 33rpx;
		background-color: #F6F6F6;
		@include set_padding(0rpx, 16rpx);
	}

	.workbench_box {
		padding-bottom: 20rpx;

		.list {

			.number_box {
				background-color: #f6f6f6;
				@include flex_box(row, nowrap, center, center);
				border-radius: 56rpx;
				position: absolute;
			}

			.list_top {
				@include set_padding(12rpx, 0rpx);
				@include flex_box(row, nowrap, space-between, center);
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);


				.top_left {
					@include flex_box(row, nowrap, flex-start, center);

				}
			}

			.list_bottom {
				@include set_padding(12rpx, 0rpx);
				@include flex_box(row, nowrap, space-between, center);
			}
		}

		.data_box {

			.data_header {
				@include flex_box(row, nowrap, flex-start, center);
			}

			.back1 {
				background: linear-gradient(93deg, #FFE2D8 0%, rgba(255, 225, 214, 0) 100%)
			}

			.data_content {
				@include set_padding(12rpx, 0rpx);

				.data_inner {
					@include flex_box(row, nowrap, flex-start, center);

					.single_data {
						flex: 1;
						@include flex_box(column, nowrap, center, center);
					}

					.center_box {
						border-left: 1rpx dashed #999999;
						border-right: 1rpx dashed #999999;
					}
				}
			}
		}

		.all_box {

			.order_header {
				@include set_padding(0rpx, 12rpx);
				@include flex_box(row, nowrap, space-between, center);

				.header_left {
					color: #1D2129;
					@include flex_box(row, nowrap, flex-start, center);
				}

				.header_right {
					@include flex_box(row, nowrap, flex-end, center);
					color: #1D2129;
				}
			}

			.list_box {
				@include flex_box(row, wrap, flex-start, center);
				.audit_btn{
					width: calc(100% - 32rpx);
					margin-left: 16rpx;
					margin-bottom: 16rpx;
				}
				.single_list {
					@include set_padding(8rpx, 8rpx);
					background-color: #F5F7FB;

					.single_header {
						@include flex_box(row, nowrap, flex-start, center);
					}

					.number_box {
						position: relative;

						.number_text {
							position: relative;
							display: inline-block;
						}
						.fc_primary{
							position: relative;
							@include flex_box(row, nowrap, flex-start, flex-start);
						}

						.radius {
							// position: absolute;
							// right: 0;
							// top: -10rpx;
							margin-left: -8rpx;
							background-color: #FE0000;

						}
					}
				}
			}
		}

		.time_box {
			@include set_padding(0rpx, 16rpx) @include flex_box(row, nowrap, space-between, center);
		}
	}
</style>